@charset "utf-8";
/* CSS Document */

* {
  -webkit-user-select:none;
  -webkit-tap-highlight-color:rgba(255, 255, 255, 0);
} 
* { 
  margin:0;
  padding:0;
}
body {
  -webkit-text-size-adjust:none;
  font-family:"微软雅黑",Arial, Helvetica, sans-serif;
  color:#858585;
  font-size:14px; 
  display: -webkit-box;
    /* We want to layout our first container vertically */
    -webkit-box-orient: vertical;
    /* we want our child elements to stretch to fit the container */
  -webkit-box-align:stretch;
  line-height:1.25em;
  background:#F8FAFB;
} /* General styles that apply to elements not contained within other classes and styles */
img,fieldset{border:0}
ul,ol{list-style:none}
i,em,address{font-style:normal}
a{color:inherit;text-decoration:none; -webkit-border-radius:5px}

@font-face {
  font-family: 'xihei';
  src: url('../fonts/fzlt.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'heijian';
  src: url('../fonts/lt.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*---通用 ---*/
.nowrap {white-space: nowrap; text-overflow: ellipsis; overflow:hidden;}
.clearfix:after { content: ""; display: block; clear: both;}
.red{ color: #805539}
.gray { color: #5c5c5c;}
.blue { color: #73693f;}




/*----layout----*/
html,body,.wrap{height: 100%;}
.wrap {display: flex; flex-direction: row; }
.aside { display: flex; flex-direction: column;width: 428px; height: 100%; }
.main { display: flex;flex-direction: column; align-content: stretch; flex: 1; height: 100%; overflow: hidden;}
.aside h1 {height: 64px;}
.city_box, .class_box{flex: 1;}
.city_bar, .class_bar {height: 34px;}
.click_box { position: relative; height: 210px;}
.map_box {flex: 1;}

/*
  暗灰： #4a4b4b
  浅灰： #efd9d5
  橘红： #ff4700
  灰线： #2a2a2a
  背景灰: #1e1e1e

*/

/*----style----*/
.aside h1 { text-indent: -99em; overflow: hidden; background: url(../images/logo.png) no-repeat #1b1b1b; text-align: right; line-height: 64px;  padding-right: 50px; color: #858585;}
.city_box, .class_box {  display: flex;flex-direction: column;align-items: stretch; }
.city_bar, .class_bar{  padding: 0 24px;line-height: 34px; background: #262828; }
.city_bar span,.class_bar span { float: right; color: #4a4b4b;}
.aside ul { display: flex; flex-direction: column;align-items: stretch;  flex: 1; background: #1e1e1e;  }
.aside ol {  display: flex; align-items: center ; flex: 1; padding: 0 50px 0 34px;}
.aside .order { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #37373d; }
.aside ul ol:nth-child(-n+3) .order{ color: #efd9d5; background: #E5480B; }
.aside ul ol:nth-child(n+1) { border-top: 1px dashed #2a2a2a;}
.aside ul ol:first-child { border: 0;}
.aside .name { display: block; box-sizing: border-box; flex-shrink: 0; padding: 0 20px; width: 120px; font-size: 16px;  }
.aside .bar { display: block; position: relative; top: -5px; flex: 1; height: 5px; background: #2b2b2d;}
.aside .bar i { position: relative; display: block; width: 80%; height: 5px; background: #636368; }
.aside .bar i.flash:after { position: absolute; right: 0px; top: 0; content: ''; display: block; width: 1px; height: 100%; background: #999;}
.aside .amount {  position: absolute; top: 5px; left: 0px;}
 
.map_box { position: relative; display: flex; align-items: stretch; }
.map_box .echarts { flex: 1;}
.map_box .total { position: absolute; top : 42px; left: 42px; }
.map_box .total h3 { font-size: 30px; font-family: heijian; font-weight: normal; line-height: 150%;}
.map_box .total small { font-size: 20px; color: #4a4b4b }
.cur_date { font-size: 20px; line-height: 120%;}
.cur_time { font-size: 28px; line-height: 120%; color: #ff4700;}
.money { margin-top: 50px;}
.money_titel,.click_titel { font-size: 28px; line-height: 160%; font-family: xihei;}
.money_num, .click_num { position: relative;  height: 64px; font-size: 40px; line-height: 160%;  border-top: 1px solid #2c2d2d; border-bottom: 1px solid #2c2d2d; color: #ff4700; overflow: hidden;}
.money_num p, .click_num p { position: relative; float: left; height: 128px; width: 24px;}
.money_num p span, .click_num p span { display: block; height: 64px;}
.money_num .btm_num, .click_num .btm_num {position: absolute; top: 50px; }
.click { margin-top: 24px;}

.click_box .head {display: flex; position: absolute; top: 0; left: 0; z-index: 2; height: 35px; width: 100%; background: #1e1e1e;  line-height: 35px; border-top: 2px solid #212122; text-align: center; color: #5c5c5c;}
.click_box .head span { flex: 1; width: 16.6666%; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }
.click_box .head:after { position: absolute; top: -16px; left: 90px; content: "";  border: 8px dashed transparent; border-bottom: 8px solid #26282a; }
.click_box .head:before { position: absolute; top: -40px; left: 70px; content: "点击明细"; color: #717171; width: 90px; height: 20px; line-height: 20px; background: url(../images/zhizhen.png) 0 2px no-repeat;}
.click_box .box_bg li{ height: 35px; }
.click_box .box_bg li:nth-child(2n){ background: #212121; }
.click_box .box_bg li:nth-child(2n+1){ background: #1e1e1e; }

.click_box .box_data { position: absolute; top: 0; left: 0; height: 210px; width: 100%; overflow: hidden;}
.click_box .box_data li{  display: flex; width: 100%; height: 35px; line-height: 35px; text-align: center; }
.click_box .box_data span { flex: 1; width: 16.6666%; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }


/*---屏幕高度过小，改变详情高度，使屏幕显示正常---*/
@media screen and (max-height: 767px) {
  .click_box { position: relative; height: 140px;}
}
